<template>
    <view class="container paddingBottomBar" :style="themeColor">
        <header-bar :config="config"></header-bar>
        <view class="wrapper">
            <view class="main">
                <view class="wrappertop">
                    <image src="@/static/img/selectbg.png" class="membershipbg"></image>
                    <view class="selectmain bg-primary">
                        <view class="agency">
                            <!-- 	<view class="agency_left color-primary text-show-line-1">{{UpgradeList.GradeName}}</view>
						<view class="agency_center">
						  <view>升级为</view>
						  <text></text>
						</view> -->
                            <view class="agency_right" @click="gradeSelect()">
                                <view class="text-show-line-1">{{ gradeName }}</view>
                                <uni-icons class="cell-icon" type="arrowdown" color="#000"></uni-icons>
                            </view>
                        </view>
                    </view>
                </view>
                <view class="downicon"></view>
                <view class="from-title">
                    <image src="@/static/img/fromleft.png"></image>
                    <view>填写资料</view>
                    <image src="@/static/img/fromright.png"></image>
                </view>
                <view class="card-list" v-if="fromData.length > 0">
                    <view v-for="(item, index) in fromData" :key="index">
                        <view class="flex-s-c">
                            <view class="name"
                                ><text class="xing-red" v-if="item.NoEmpty">*</text>{{ item.Title }}</view
                            >
                            <view v-if="item.ValueType == 0">
                                <!-- 文本框 -->

                                <input
                                    v-if="item.RegexStr"
                                    :disabled="UpgradeList.ApplyStatus == 0 || UpgradeList.ApplyStatus == 4"
                                    class="input"
                                    type="number"
                                    maxlength="11"
                                    placeholder-style="color:#cccccc"
                                    v-model="item.Value"
                                    :placeholder="item.Placeholder" />
                                <input
                                    v-else
                                    class="input"
                                    :disabled="UpgradeList.ApplyStatus == 0 || UpgradeList.ApplyStatus == 4"
                                    type="text"
                                    placeholder-style="color:#cccccc"
                                    v-model="item.Value"
                                    :placeholder="item.Placeholder" />
                            </view>
                            <view v-if="item.ValueType == 1" style="flex: 1">
                                <!-- 多选框 -->
                                <checkbox-item
                                    @checkboxChange="checkboxChange"
                                    :index="index"
                                    :data="item.newOptions"></checkbox-item>
                            </view>
                            <template v-if="item.ValueType == 2">
                                <!-- 单选框 -->
                                <radio-item
                                    @radioChange="radioChange"
                                    :index="index"
                                    :data="item.newOptions"></radio-item>
                            </template>
                            <view v-if="item.ValueType == 3" style="flex: 1"
                                ><!-- 下拉框 -->
                                <select-item
                                    @bindPickerChange="bindPickerChange"
                                    :activevalue="item.Value"
                                    :index="index"
                                    :data="item.Options"></select-item>
                            </view>
                            <view v-if="item.ValueType == 4" style="flex: 1"
                                ><!-- 日期 -->
                                <date-item
                                    @bindDateChange="bindDateChange"
                                    :date="item.Value"
                                    :index="index"></date-item>
                            </view>
                            <view v-if="item.ValueType == 5" style="flex: 1"
                                ><!-- 日期+时间 -->
                                <datetime-item @ed="ed" :date="item.Value" :index="index"></datetime-item>
                            </view>
                            <view v-if="item.ValueType == 6">
                                <!--文本框 -->
                                <input
                                    class="input"
                                    type="text"
                                    placeholder-style="color:#cccccc"
                                    v-model="item.Value"
                                    :placeholder="item.Placeholder" />
                            </view>
                            <view v-if="item.ValueType == 7"
                                ><!--单张图片 -->
                                <img-item
                                    :data="item.Value"
                                    :upgrade="true"
                                    :disabled="UpgradeList.ApplyStatus == 0 || UpgradeList.ApplyStatus == 4"
                                    @chooseImage="chooseImage"
                                    :num="1"
                                    :index="index"></img-item>
                            </view>
                            <view v-if="item.ValueType == 8"
                                ><!--多张张图片 -->
                                <img-item
                                    :data="item.Value"
                                    :upgrade="true"
                                    :disabled="UpgradeList.ApplyStatus == 0 || UpgradeList.ApplyStatus == 4"
                                    @chooseImage="chooseImage"
                                    :num="9"
                                    :index="index"></img-item>
                            </view>
                            <view v-if="item.ValueType == 9" class="border">
                                <provinces-item
                                    :data="item.Value"
                                    @changeRegin="changeRegin"
                                    @changeAppRegin="changeAppRegin"
                                    :index="index"></provinces-item>
                            </view>
                        </view>
                    </view>
                </view>
            </view>

            <button
                class="btn btn-success next-step"
                v-if="UpgradeList.ApplyStatus == 0 || UpgradeList.ApplyStatus == 4">
                正在审核中
            </button>
            <button class="btn btn-success next-step" v-else @click="submit">提交申请</button>
            <uni-popup type="bottom" ref="grade" background-color="#fff" :safe-area="false">
                <view class="pop-pay-way">
                    <view class="title"><text>请选择</text></view>
                    <scroll-view scroll-y="true" class="pay-way-scroll">
                        <view class="pay-way">
                            <view
                                class="pay-way-item"
                                v-for="(item, index) in UpgradeList.GradeList"
                                @click="select(item, index)">
                                <text>{{ item.Name }}</text>
                            </view>
                        </view>
                    </scroll-view>
                    <button class="btn" @click="cancel">取消</button>
                </view>
            </uni-popup>
        </view>
    </view>
</template>
<script>
import { uploadImage } from "@/service/api/file.js"
import { GetApplyUpgradeInfo, ApplyUpgrade } from "@/service/api/member.js"
import { GetCustomFormTemplateList } from "@/service/api/customForm.js"

import storage from "@/uni-sub-base/utils/storage.js"
import MxDatePicker from "@/components/mx-datepicker/mx-datepicker.vue"
import checkboxItem from "@/pages_shop/components/form/checkbox-item.vue"
import radioItem from "@/pages_shop/components/form/radio-item.vue"
import selectItem from "@/pages_shop/components/form/select-item.vue"
import dateItem from "@/pages_shop/components/form/date-item.vue"
import datetimeItem from "@/pages_shop/components/form/datetime-item.vue"
import imgItem from "@/pages_shop/components/form/img-item.vue"
import provincesItem from "@/pages_shop/components/form/provinces-item.vue"
export default {
    components: {
        MxDatePicker,
        checkboxItem,
        radioItem,
        selectItem,
        dateItem,
        datetimeItem,
        imgItem,
        provincesItem,
    },
    data() {
        return {
            config: {
                title: "申请",
                back: true,
                color: ["#ffffff"],
                backgroundColor: [1, "#162839"],
                centerSlot: true,
                barPlaceholder: true,
            },
            fromData: [],
            region: [],
            gradeName: "请选择",
            UpgradeList: {},
            gradeName: "",
            gradeId: null,
        }
    },
    mounted() {
        this.upgradeInfo()
    },
    onLoad(e) {},
    methods: {
        upgradeInfo() {
            GetApplyUpgradeInfo().then((res) => {
                if (res.State == 1) {
                    this.UpgradeList = res.Data
                    this.gradeName = res.Data.UpgradeName
                    this.gradeId = res.Data.UpgradeId
                    if (!(this.UpgradeList.ApplyStatus == 0 || this.UpgradeList.ApplyStatus == 4)) {
                        this.formTemplateList(res.Data.FormTemplateId)
                    }
                    if (this.UpgradeList.UpgradeAttribute.length > 0) {
                        this.UpgradeList.UpgradeAttribute.forEach((e) => {
                            e.Title = e.AttributeName
                        })
                        this.fromData = this.UpgradeList.UpgradeAttribute
                    }
                }
            })
        },
        formTemplateList(id) {
            GetCustomFormTemplateList(id).then((res) => {
                if (res.State == 1) {
                    this.fromData = res.Data
                }
            })
        },
        select(item, index) {
            this.gradeName = item.Name
            this.gradeId = item.ID
            this.$forceUpdate()
            this.cancel()
            this.fromData = []
            this.formTemplateList(item.FormTemplateId)
        },
        checkboxChange(index, value) {
            this.fromData[index].Value = value
        },
        radioChange(index, value) {
            this.fromData[index].Value = value
        },
        bindPickerChange(index, value) {
            this.fromData[index].Value = value
        },
        bindDateChange(index, value) {
            this.fromData[index].Value = value
        },
        ed(index, value) {
            this.fromData[index].Value = value
        },
        chooseImage(index, value) {
            this.fromData[index].Value = value
        },
        changeRegin(index, value) {
            this.fromData[index].Value = value.join(",")
        },
        changeAppRegin(index, value) {
            this.fromData[index].Value = value
        },
        gradeSelect() {
            if (!(this.UpgradeList.ApplyStatus == 0 || this.UpgradeList.ApplyStatus == 4)) {
                this.$refs.grade.open()
            }
        },
        cancel() {
            this.$refs.grade.close()
        },
        submit() {
            var that = this
            let parm = {
                upgradeId: this.gradeId,
            }
            if (this.fromData.length > 0) {
                let pass = true
                if (pass) {
                    for (let i = 0; i < this.fromData.length; i++) {
                        let e = this.fromData[i]
                        if (e.NoEmpty) {
                            if (!e.Value) {
                                this.easyToast(e.EmptyErrMsg)
                                return (pass = false)
                                break
                            } else {
                                if (e.RegexStr == "^(1[3456789]\\d{9}|09\\d{8})$") {
                                    if (!/^1[3456789]\d{9}$/.test(e.Value)) {
                                        this.easyToast(e.Title + "输入有误")
                                        return (pass = false)
                                        break
                                    }
                                }
                            }
                        }
                    }
                }

                let formobj = []
                this.fromData.forEach((e) => {
                    if (e.Value) {
                        let subobj = {
                            AttributeName: e.Title,
                            value: e.Value,
                            ValueType: e.ValueType,
                            AttributeId: e.ID,
                        }
                        formobj.push(subobj)
                    }
                })
                parm.UpgradeAttribute = formobj
            }
            ApplyUpgrade(parm).then((res) => {
                if (res.State == 1) {
                    this.easyToast("提交成功")
                    setTimeout((e) => {
                        that.easyGoBack()
                    }, 2000)
                } else {
                    this.easyToast(res.Msg)
                }
            })
        },
    },
}
</script>

<style lang="scss">
page {
    background: #162839;
}
.wrapper {
    padding: 24rpx 32rpx;
}
.wrappertop {
    background: linear-gradient(132deg, #ffe9c6 0%, #dba98b 100%);
    box-shadow: 0px 4px 40px 0px rgba(8, 18, 29, 0.24);
    border-radius: 22rpx;
    height: 244rpx;
    .membershipbg {
        width: 686rpx;
        height: 244rpx;
    }
    .selectmain {
        height: 244rpx;
        margin-top: -244rpx;
        position: relative;
        border-radius: 24rpx;
        display: flex;
        align-items: center;
        .tip {
            font-size: 28rpx;
            color: #562a0f;
            padding-top: 44rpx;
            padding-left: 48rpx;
            padding-bottom: 18rpx;
            .two {
                padding-left: 275rpx;
            }
        }
    }
    .agency {
        padding: 0 32rpx;
        display: flex;
        justify-content: space-between;
        flex: 1;
        .agency_left,
        .agency_right {
            flex: 1;
            // width: 252rpx;
            height: 88rpx;
            line-height: 88rpx;
            background: rgba(255, 255, 255, 0.66);
            border-radius: 16rpx;
            font-size: 32rpx;
            font-weight: bold;
            text-align: center;
            border: 2rpx solid #ffffff;
            padding: 0 24rpx;
        }
        .agency_right {
            display: flex;
            justify-content: space-between;
            align-items: center;
            .text-show-line-1 {
                // width: 400rpx;
            }
        }
        .agency_center {
            height: 88rpx;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            view {
                width: 72rpx;
                height: 34rpx;
                font-size: 24rpx;
                font-weight: 400;
                color: #562a0f;
                line-height: 34rpx;
            }
            text {
                width: 71rpx;
                height: 5rpx;
                opacity: 0.8;
                border-bottom: 2rpx solid #562a0f;
            }
        }
    }
}
.downicon {
    width: 0px;
    height: 0px;
    border: 26rpx solid;
    border-left-color: transparent;
    border-right-color: transparent;
    border-bottom-color: transparent;
    border-top-color: #e0b293;
    position: relative;
    margin-left: 550rpx;
    margin-top: -2rpx;
}
.main {
    background: #fff9f2;
    border-radius: 22rpx;
}
.from-title {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 32rpx;
    font-weight: 700;
    padding: 0rpx 0 32rpx 0;
    color: #562a0f;
    view {
        margin: 0 16rpx;
    }
    image {
        width: 48rpx;
        height: 16rpx;
    }
}
.card-list {
    margin-bottom: 24rpx;
    background: #ffffff;
    border-radius: 8rpx;
    padding-bottom: 20rpx;
    .flex-s-c {
        font-size: $font-size-30;
        color: $color-gray-1;
        background: $uni-bg-color;
        // background: #ccc;
        padding: 20rpx 0;
        margin: 0 40rpx;
        .name {
            // width: 180rpx;
            overflow: hidden;
            text-overflow: -o-ellipsis-lastline;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            line-clamp: 1;
            -webkit-box-orient: vertical;
            color: #333333;
            font-size: 28rpx;
            height: 40rpx;
            color: #162839;
            line-height: 40rpx;
            margin-bottom: 12rpx;
        }
        .input {
            height: 84rpx;
            border: 2rpx solid #162839;
            padding-left: 20rpx;
        }
        .border {
            border: 2rpx solid #162839;
            padding: 22rpx 20rpx;
        }
        input {
            text-align: left;
        }
    }

    & > .flex-s-c:first-child {
        border-radius: 8rpx 8rpx 0 0;
    }

    & > .flex-s-c:last-child {
        border-radius: 0 0 8rpx 8rpx;
        border: none;
    }

    .w60 {
        width: 60%;
        text-align: right;
    }
}
.next-step {
    width: 690rpx;
    height: 90rpx;
    background: linear-gradient(90deg, #faebd3 0%, #dba98b 100%);
    box-shadow: 0px 4rpx 12rpx 0px #08121d;
    border-radius: 56rpx;
    font-size: 34rpx;
    color: #562a0f;
    font-weight: bold;
}
.xing-red {
    color: red;
    padding-right: 4rpx;
}
.pay-way-item {
    justify-content: center;
    text-align: center;
}
</style>
